<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        </div>
        <div class="head-search">我的公司</div>
      </div>
    </div>
    <div class="content">
      <div class="block">
          <img src="../../assets/bianji.png" alt="" class="bianji" @click="go('/means')">
        <div class="comTop">
            <img src="../../assets/avatar.png" alt="">
            <div>
                <span>大连xxxxxx公司</span>
                <span>12345678900</span>
                <span>大连市高新区xxxxxxxxxxxx</span>
            </div>
        </div>
        <div class="comText">
            简介：xxxxxxxxxxxxxxxxxxxx暂无数据
        </div>
      </div>
      <div class="block">
          <img src="../../assets/bianji.png" alt="" class="bianji" @click="go('/information')">
        <div class="comText">
            姓名：张三
        </div>
        <div class="comText">
            职位：emm..
        </div>
        <div class="comText">
            手机：1234567890
        </div>
        <div class="comText">
            邮箱：13456789@qq.com
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "company",
  components: {},
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status
    };
  },
  // methods 编写js函数
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    go(r) {
      this.$router.push(r);
    }
  },
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #3e63a8;
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.xg {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #3e63a8;
}
.clear{
  width: 100%;
  height: 30px;
}
.block {
  width: 100%;
  box-shadow: 2px 2px 5px #c7c7c7;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  position: relative;
}
.comTop{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.comTop img{
    width: 100px;
    height: 100px;
    border-radius: 10px;
}
.comTop div{
    font-size: 14px;
    color: #333;
    display: flex;
    flex-flow: column;
    flex:1;
    box-sizing: border-box;
    padding: 5px 0 5px 10px;
}
.comTop div span{
    padding: 5px;
}
.comText{
    color: #333;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}
.bianji{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>
